@import '../../css/list.wxss';
page {
    padding-bottom: 105rpx;
}

.page-confirm {
    width: 100%;

    .confirm-top {
        height: 206rpx;
        display: flex;
        padding: 26rpx 36rpx 45rpx;
        background: url(../../assets/confirm_bg.jpg) no-repeat;
        background-size: 100% 100%;

        .t-l {
            width: 440rpx;
            padding-right: 34rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .name {
                color: #fff;
                font-size: 32rpx;
                margin-bottom: 12.5rpx;
                display: flex;

                image {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }

                text {
                    flex: 1;
                }
            }

            .address {
                line-height: 1.35;
                color: #c9d4fa;
                color: rgba($color: #fff, $alpha: .6);
                font-size: 24rpx;
            }

            
        }

        .t-r {
            padding-left: 33rpx;
            justify-content: center;
            display: flex;
            align-items: center;
            position: relative;

            .price {
                color: #fff;
                font-size: 44rpx;
            }

            .sale {
                color: #92e2ff;
                font-size: 24rpx;
            }
            &::before {
                content: '';
                width: 1px;
                height: 50%;
                background: linear-gradient(#79c3ff, rgba($color: #fff, $alpha: .6), #79c3ff);
                background: -webkit-linear-gradient(#79c3ff, rgba($color: #fff, $alpha: .6), #79c3ff);
                position: absolute;
                top: 25%;
                left: 0;
            }
        }
        &.noprice{
            .t-l{
                width: 92%;
            }
            .t-r{
                display: none;
            }
        }
    }

    .confirm-current {
        height: 222rpx;
        margin: -28rpx 5% 28rpx;
        padding: 38rpx 0 50rpx;
        text-align: center;
        background-color: #fff;
        box-shadow: 0 0 1px 3px #f6f6f6;
        border-radius: 10rpx;
        display: flex;
        flex-direction: row;

        .num-wrap {
            width: 50%;

            image {
                width: 70rpx;
                height: 70rpx;
                margin-right: 10rpx;
                vertical-align: middle;
            }

            text {
                font-size: 30rpx;
                color: #999;
            }

            .num {
                margin-top: 26rpx;
                color: #333;
                font-size: 40rpx;
            }
        }
    }

    .input-wrap {
        width: 100%;
        padding: 28rpx 36rpx 24rpx;
        margin: 0 auto;
        background-color: #fff;

        .title {
            color: #666;
            font-size: 28rpx;
            margin-bottom: 32rpx;
        }

        .input-item,
        .item {
            margin-bottom: 22rpx;
            border: 1px solid #1c7bfb;
            background: #f9fdff;
            border-radius: 10rpx;
            color: #1a5790;
        }

        .input-item {
            height: 120rpx;
            padding: 24rpx 14rpx;
            display: flex;

            input,
            text {
                font-size: 60rpx;
                color: #333;
            }

            input {
                height: 100%;
                padding-left: 0;
                background: transparent;
            }

            .input-holder {
                font-size: 30rpx;
            }
        }

        .item-group {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .item {
                width: 31.28%;
                line-height: 1;
                padding: 30rpx 1.5% 30rpx 0;
                text-align: center;
                font-size: 24rpx;
                background-color: #fff;

                .price {
                    font-size: 34rpx;
                }

                &.checked {
                    color: #fff;
                    background-color: #1c7bfb;
                    border: none;
                }
            }
        }

        .discount-wrap {
            display: flex;
            justify-content: space-between;

            .discount-name {
                font-weight: bolder;
            }

            .discount-amount {
                color: #666;
            }
        }
    }

    .list-wrap {
        border-top: #ddd;
        padding: 33rpx 5% 35rpx;
        border-top: 1px solid #eee;
        .arrow-right.unable{
            color: #999;
        }
    }

    .confirm-footer {
        width: 100%;
        height: 150rpx;
        padding: 0 26rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: #fff;
        box-shadow: 0 -1px 3px 3px #eee;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        .left {
            display: flex;
            align-items: center;
            
            .price {
                color: #333;
                font-size: 28rpx;
                padding-right: 18rpx;

                text {
                    font-size: 36rpx;
                }
            }

            .discount {
                color: #e6916a;
                padding-left: 18rpx;
                font-size: 28rpx;
                border-left: 2rpx solid #eee;
            }

        }
        .btn {
            width: 294rpx;
            height: 105rpx;
            line-height: 105rpx;
            border-radius: 8rpx;
            margin: 0;

            &.btn-disabled {
                background: rgb(229, 230, 230);
            }
        }
    }
}

.am-popup-bottom {
    z-index: 101;
}

.popup-wrap {
    background: #fff;
    min-height: 730rpx;
    position: relative;
    .title {
        width: 100%;
        height: 126rpx;
        line-height: 126rpx;
        font-size: 30rpx;
        display: flex;
        justify-content: space-around;
    }

    .am-tabs-bar,
    .am-tabs-bar-tab,
    .am-tabs-scroll-left,
    .am-tabs-scroll-right {
        height: 106rpx;
        background-color: #eaeff2;
    }
    .am-tabs-scroll-left,
    .am-tabs-scroll-right{
        width: 40rpx;
    }
    .tab-content {
        height: 498rpx;
        overflow-y: scroll;
    }
}
.am-modal-show{
    z-index: 10001;
}